<link rel="stylesheet" href="scripts/zebra_pagination/zebra_pagination.css" type="text/css" />
<script type="text/javascript" src="scripts/cloudzoom/jquery-1.8.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/cloudzoom/cloudzoom.css" />
<script type="text/javascript" src="scripts/cloudzoom/cloudzoom.js"></script>
<script type="text/javascript">
    CloudZoom.quickStart();
</script>
<div class="navigation_title">
    <?php
        include 'position.php';
        if(isset($_GET['sid']))
            $MaLoaiSanPham = $_GET['sid'];
        else
            $MaLoaiSanPham = 0;
        $loaisanpham = new loaisanphambs();
        $loaisanpham->MaLoaiSanPham = $MaLoaiSanPham;
        $ret_loaisanpham = $loaisanpham->getList();
        echo ARROW.$ret_loaisanpham[0]['TenLoaiSanPham'];
    ?>
</div>
<div class="navigation_body" style="clear: both; position: relative; padding-top: 10px; overflow: auto;">
    <img data-cloudzoom='{"zoomImage": "images/sanpham/hinhto/9048f99249cb9870da11.jpg"}' src="images/sanpham/hinhnho/939205db5c3f73d073f3.jpg" class="cloudzoom" />
        <?php
        require 'admin/config.php';
        // how many records should be displayed on a page?
        $records_per_page = 1;

        // include the pagination class
        require 'scripts/zebra_pagination/Zebra_Pagination.php';

        // instantiate the pagination object
        $pagination = new Zebra_Pagination();

        // set position of the next/previous page links
        $pagination->navigation_position('outside');

        // the MySQL statement to fetch the rows
        // note how we build the LIMIT
        // also, note the "SQL_CALC_FOUND_ROWS"
        // this is to get the number of rows that would've been returned if there was no LIMIT
        // see http://dev.mysql.com/doc/refman/5.0/en/information-functions.html#function_found-rows
        $MySQL = '
            SELECT
                SQL_CALC_FOUND_ROWS
                *
            FROM
                giaphucvn_sanpham
            WHERE
                MaLoaiSanPham = '.$MaLoaiSanPham.'
            ORDER BY
                TenSanPham
            LIMIT
                ' . (($pagination->get_page() - 1) * $records_per_page) . ', ' . $records_per_page . '
        ';


        // if query could not be executed
        if (!($result = @mysql_query($MySQL)))

            // stop execution and display error message
            die(mysql_error());

        // fetch the total number of records in the table
        $rows = mysql_fetch_assoc(mysql_query('SELECT FOUND_ROWS() AS rows'));

        // pass the total number of records to the pagination class
        $pagination->records($rows['rows']);

        // records per page
        $pagination->records_per_page($records_per_page);

        ?>
        <?php
            $i = 1;
            while ($row = mysql_fetch_assoc($result))
            {
                if($i%2 == 0)
                    $cen = ' cen';
                else
                    $cen = '';
                echo '<div class="product'.$cen.'">
                        <a class="imgTip" href="index.php?cont=chitiet_sanpham&sid='.$row['MaSanPham'].'">
                        <span><img style="width: 150px; height: 150px;" src="images/sanpham/hinhnho/'.$row["HinhNho"].'" /></span>
                        <span>'.$row["TenSanPham"].'</span>
                        </a>
                        <span class="rice">'.$row["GiaGoc"].'</span>
                        <span>
                            <a href="index.php?cont=mua_sanpham&sid='.$row['MaSanPham'].'"><img src="images/muahang.png" /></a>
                        </span>
                      </div>';
                $i++;
            }
            
        // render the pagination links
            $pagination->render();
        ?>
</div>
<div class="navigation_footer" style="clear: both;">
    &nbsp;
</div>
<script type="text/javascript">
    $(document).ready(function() {
    	//$('a.tTip').tinyTips('light', 'title');
    	$('a.imgTip').tinyTips('yellow', '<img src="scripts/tinytips/images/demo-image.jpg" /><br />You can even put images or any other markup in the tooltips.');
    	//$('img.tTip').tinyTips('green', 'title');
    	//$('h1.tagline').tinyTips('blue', 'tinyTips are totally awesome!');
    });
</script>